<template>
  <div class="dashboard-container">
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header">
        <span>详细信息</span>
      </div>
      <div class="dashboard-header">
        <el-card class="card" shadow="hover" :body-style="{ padding: '0px' }">
          <div slot="header">
            <span>图片总数据量:{{info.imgCount.count}}条</span>
          </div>
          <div class="card-main">
            <span>今日增加量:{{info.imgCountToday.count}}条</span>
          </div>
        </el-card>
        <el-card class="card" shadow="hover" :body-style="{ padding: '0px' }">
          <div slot="header">
            <span>学生总数据量:{{info.userCount.count}}条</span>
          </div>
          <div class="card-main">
            <span>今日增加量:{{info.userCountToday.count}}条</span>
          </div>
        </el-card>
        <el-card class="card" shadow="hover" :body-style="{ padding: '0px' }">
          <div slot="header">
            <span>新闻总数据量:{{info.newsCount.count}}条</span>
          </div>
          <div class="card-main">
            <span>今日增加量:{{info.newsCountToday.count}}条</span>
          </div>
        </el-card>
      </div>
    </el-card>
    <el-card style="margin-top:50px" :body-style="{ padding: '0px' }">
      <div slot="header">
        <span>详细图表</span>
      </div>
      <div class="chart" style="padding:20px">
        <el-card shadow="hover" style="border:0;width:46%" :body-style="{ padding: '0px' }">
          <div id="mychart1" style="width:550px;height:400px;"></div>
        </el-card>
        <el-card shadow="hover" style="border:0;width:46%" :body-style="{ padding: '0px' }">
          <div id="mychart2" style="width:550px;height:400px;"></div>
        </el-card>
        <el-card  shadow="hover" style="border:0;width:46%;margin-top:30px" :body-style="{ padding: '0px' }">
          <div id="mychart3" style="width:550px;height:400px;"></div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
var echarts = require("echarts");
import { getToken } from "@/utils/myAuth";
import { dashboardInfo } from "@/api/dashboard/dashboard";
import { getuserinfo } from "@/api/userInfo";
export default {
  name: "Dashboard",
  data() {
    return {
      info: {
        imgCount: {
          count: 0,
        },
        imgCountToday: {
          count: 0,
        },
        userCount: {
          count: 0,
        },
        userCountToday: {
          count: 0,
        },
        newsCount: {
          count: 0,
        },
        newsCountToday: {
          count: 0,
        },
      },
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.myChart1 = echarts.init(document.getElementById("mychart1"));
    this.myChart2 = echarts.init(document.getElementById("mychart2"));
    this.myChart3 = echarts.init(document.getElementById("mychart3"));
  },
  methods: {
    initNewsChart(news) {
      this.myChart3.setOption({
        backgroundColor: "#2c343c",

        title: {
          text: "新闻增长饼状图",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "新增量",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: news,
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      });
    },
    initImgChart(numArr, dataArr) {
      this.myChart1.setOption({
        title: {
          text: "图片增长柱形图",
        },
        tooltip: {},
        xAxis: {
          data: dataArr,
          axisLabel: {
            rotate: 20, // x轴刻度旋转60deg
          },
        },
        yAxis: {},
        series: [
          {
            name: "增长量",
            type: "bar",
            data: numArr,
          },
        ],
      });
    },
    initUserChart(numArr, dataArr) {
      this.myChart2.setOption({
        title: {
          text: "用户增长线形图",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dataArr,
          axisLabel: {
            rotate: 20, // x轴刻度旋转60deg
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "增长量",
            type: "line",
            data: numArr,
            areaStyle: {},
          },
        ],
      });
    },
    async init() {
      var obj = {
        "bufan-token": getToken(),
      };
      var res = await dashboardInfo(obj);
      this.info = res;
      var imgNum = [];
      var imgData = [];
      res.imgCountByDay.forEach((ele) => {
        imgNum.push(ele.count);
        imgData.push(ele.date);
      });

      this.initImgChart(imgNum, imgData);
      var userNum = [];
      var userData = [];
      res.userCountByDay.forEach((ele) => {
        userNum.push(ele.count);
        userData.push(ele.date);
      });
      this.initUserChart(userNum, userData);
      var news = [];
      res.newsCountByDay.forEach((ele) => {
        var obj = {
          name:ele.date,
          value:ele.count
        }
        news.push(obj)
      });
      console.log(news);
      this.initNewsChart(news);
      // this.initNewsChart(newsNum, newsData);
      console.log(res);
    },
  },
  computed: {
    name() {
      return JSON.parse(getuserinfo()).username;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 30px;
}
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 100px;
  .card {
    width: 24%;
    margin-bottom: 30px;
    margin-right: 20px;
    ::v-deep .el-card__header {
      padding: 20px;
      font-size: 22px;
      color: rgb(67, 69, 73);
    }
    .card-main {
      text-align: right;
      padding: 20px;
      color: rgb(33, 124, 15);
      font-size: 18px;
    }
  }
}
.chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
